<template>
  <div class="home-page">
    <!-- 用户地域分布统计模块 -->
    <el-card>
      <template #header>
        <div class="region-header">
          <span>用户地域分布统计</span>
          <el-icon size="20" color="#409EFF"><Location /></el-icon>
        </div>
      </template>
      <div class="chart-content">
        <!-- ECharts 柱状图容器 -->
        <div ref="chartRef" class="chart-container"></div>
        
        <!-- 详细统计表格 -->
        <div class="detailed-stats">
          <h3>详细地域统计</h3>
          <el-table :data="detailedRegionStats" style="width: 100%">
            <el-table-column prop="province" label="省份" width="120"></el-table-column>
            <el-table-column prop="city" label="城市" width="120"></el-table-column>
            <el-table-column prop="userCount" label="用户数" width="100" align="center">
              <template #default="scope">
                <el-tag type="primary">{{ scope.row.userCount }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="percentage" label="占比" width="100" align="center">
              <template #default="scope">
                <span>{{ scope.row.percentage }}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="growth" label="增长趋势" align="center">
              <template #default="scope">
                <el-tag 
                  :type="scope.row.growth > 0 ? 'success' : scope.row.growth < 0 ? 'danger' : 'info'"
                  size="small"
                >
                  {{ scope.row.growth > 0 ? '+' : '' }}{{ scope.row.growth }}%
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import { Location } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

export default {
  name: 'Home',
  components: {
    Location
  },
  setup() {
    const chartRef = ref(null)
    let chartInstance = null
    
    // 地域统计数据（模拟数据）
    const regionStats = ref([
      {
        name: '华北地区',
        count: 156,
        percentage: 35.2,
        color: '#409EFF'
      },
      {
        name: '华东地区',
        count: 128,
        percentage: 28.9,
        color: '#67C23A'
      },
      {
        name: '华南地区',
        count: 98,
        percentage: 22.1,
        color: '#E6A23C'
      },
      {
        name: '西南地区',
        count: 45,
        percentage: 10.2,
        color: '#F56C6C'
      },
      {
        name: '西北地区',
        count: 28,
        percentage: 6.3,
        color: '#909399'
      },
      {
        name: '东北地区',
        count: 21,
        percentage: 4.7,
        color: '#606266'
      }
    ])
    
    // 详细地域统计数据
    const detailedRegionStats = ref([
      { province: '北京', city: '北京市', userCount: 45, percentage: 10.2, growth: 8.5 },
      { province: '上海', city: '上海市', userCount: 42, percentage: 9.5, growth: 12.3 },
      { province: '广东', city: '深圳市', userCount: 38, percentage: 8.6, growth: 15.7 },
      { province: '浙江', city: '杭州市', userCount: 35, percentage: 7.9, growth: 6.2 },
      { province: '江苏', city: '南京市', userCount: 32, percentage: 7.2, growth: 4.8 },
      { province: '山东', city: '青岛市', userCount: 28, percentage: 6.3, growth: -2.1 },
      { province: '四川', city: '成都市', userCount: 25, percentage: 5.7, growth: 9.4 },
      { province: '湖北', city: '武汉市', userCount: 23, percentage: 5.2, growth: 7.6 },
      { province: '陕西', city: '西安市', userCount: 18, percentage: 4.1, growth: 3.2 },
      { province: '辽宁', city: '大连市', userCount: 15, percentage: 3.4, growth: -1.5 }
    ])
    
    // 初始化 ECharts
    const initChart = () => {
      if (chartRef.value && !chartInstance) {
        chartInstance = echarts.init(chartRef.value)
        updateChart()
        
        // 窗口大小改变时重绘图表
        window.addEventListener('resize', () => {
          chartInstance?.resize()
        })
      }
    }
    
    // 更新图表数据
    const updateChart = () => {
      if (!chartInstance) return
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            const data = params[0]
            return `${data.name}<br/>用户数：${data.value}人<br/>占比：${regionStats.value.find(item => item.name === data.name)?.percentage || 0}%`
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: regionStats.value.map(item => item.name),
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          name: '用户数'
        },
        series: [
          {
            name: '用户数',
            type: 'bar',
            barWidth: '60%',
            data: regionStats.value.map(item => ({
              value: item.count,
              itemStyle: {
                color: item.color
              }
            })),
            label: {
              show: true,
              position: 'top',
              formatter: '{c}人'
            }
          }
        ]
      }
      
      chartInstance.setOption(option)
    }
    
    // 监听数据变化，更新图表
    watch(regionStats, () => {
      updateChart()
    }, { deep: true })
    
    onMounted(() => {
      initChart()
    })
    
    return {
      chartRef,
      regionStats,
      detailedRegionStats
    }
  }
}
</script>

<style scoped>
.home-page {
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}

.region-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  color: #303133;
  font-size: 18px;
}

.chart-content {
  padding: 20px 0;
}

.chart-container {
  width: 100%;
  height: 400px;
  margin-bottom: 30px;
}

.detailed-stats h3 {
  color: #303133;
  margin-bottom: 15px;
  font-size: 16px;
  border-left: 4px solid #409EFF;
  padding-left: 10px;
}

.detailed-stats .el-table {
  border-radius: 8px;
  overflow: hidden;
}

.detailed-stats .el-table th {
  background-color: #f8f9fa;
  color: #606266;
  font-weight: 600;
}

.detailed-stats .el-table td {
  border-bottom: 1px solid #f0f2f5;
}

.detailed-stats .el-table tr:hover {
  background-color: #f8f9fa;
}
</style>